<template>
    <div class="zsListLook">
        <div class="header">
            <van-nav-bar :title="`${route.query.title}已出库`" left-arrow @click-left="handleLeft" />
        </div>
        <div class="zsListLook_top">
            <SelectionDetails title="选品详情" type="1" :datas="datas" />
        </div>
        <div class="zsListLook_list">
            <ListLookCard type="3" v-for="item in listData" :key="item.productId" :datas="item"
                @itemClick="routerGo(item.type, item.productId)" @onRefresh="getList" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getEnvValue } from "@/utils/index";
// api
import { selectByOutId } from '@/api/operation/index'
// 组件
import SelectionDetails from '../components/selectionDetails/index.vue'
import ListLookCard from '../components/listLookCard/index.vue'


const route = useRoute()
const router = useRouter()
const datas = ref<any>({})
const listData = ref<Array<any>>([])

const handleLeft = () => {
    router.back()
}

const getList = async () => {
    const { rows = [] } = await selectByOutId({ id: datas.value.outId })
    rows.forEach((item) => {
        if (item.productImage) {
            item.productImages = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(',')[0];
        } else {
            item.productImages = "";
        }
    });
    listData.value = rows
}

// 跳转商品详情
const routerGo = (type: any, id: string) => {
    if (type == 1) {
        router.push({
            path: `/researchBasicsDetail/${id}`
        })
    } else {
        router.push({
            path: `/operationBasicsDetail/${id}`
        })
    }
}

onMounted(() => {
    const data: any = route?.query?.rowData || '{}'
    datas.value = JSON.parse(data)
    getList()
})
</script>

<style lang="less" scoped>
.zsListLook {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    background: #F6FAFF;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .zsListLook_top {
        padding: 10px 15px;
    }

    .zsListLook_list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
    }
}
</style>